<script setup lang="ts">
import { deepClone } from '@/utils/util'
import { MeunItem } from '../interfaceType'
import type { FormInstance, FormRules } from 'element-plus'

let props = defineProps({
    config: { type: Object as () => MeunItem, required: true },
    dialogConfig: { type: Boolean, default: false, required: false },
    onClose: { type: Function, default: () => { } },
    onSubmit: { type: Function, default: () => { } }
})
let { config, dialogConfig } = props;

function saveIconMenu() {
    dialogConfig = false
    props.onSubmit(deepClone(temporaryMenu.value))
}
function qx() {
    dialogConfig = false
    props.onClose()
}
let temporaryMenu = toRef(config)
const ruleFormRef = ref<FormInstance>()

function checkUrl() {
    ruleFormRef.value?.validateField()
}

var validateURL = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('网址不能为空'));
    }
    // 正则表达式判断是否为有效的URL
    const urlRegex = /^http(s?):\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/;
    if (!urlRegex.test(value)) {
        callback(new Error('请输入有效的网址'));
    } else {
        // debugger
        callback();
    }
}
let html = ref()

function getFaviconIco() {
    let iconUrl = temporaryMenu.value?.url!.split('?')[0]
    // 定义需要剪切的前缀列表
    const prefixes = ["http://", "https://", "www."];
    // 循环遍历前缀列表，逐一检查并删除
    prefixes.forEach(prefix => {
        if (iconUrl.startsWith(prefix)) {
            iconUrl = iconUrl.slice(prefix.length);
        }
    });

    temporaryMenu.value.iconUrl = `https://api.iowen.cn/favicon/` + iconUrl.split('/')[0] + `.png`
}

const rules = reactive<FormRules>({
    url: [{ validator: validateURL, trigger: 'blur' }]
})

</script>

<template>
    <el-dialog v-model="dialogConfig" title="" width="500" :append-to-body="true" @close="qx">
        <div class="icon-box" style="padding: 10px;">
            <div class="image">
                <el-image class="icon-img" :src="temporaryMenu?.iconUrl" fit="cover" />
            </div>
        </div>
        <el-form :model="temporaryMenu" ref="ruleFormRef" label-width="80px">
            <el-form-item label="图片">
                <el-input autocomplete="off" v-model="temporaryMenu!.iconUrl"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input autocomplete="off" v-model="temporaryMenu!.title"></el-input>
            </el-form-item>
            <el-form-item label="网址" prop="url" :rules="[{ validator: validateURL, trigger: 'blur' }]">
                <el-input type="textarea" v-model="temporaryMenu!.url" :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="Please input" autocomplete="off" @input="checkUrl" @blur="getFaviconIco"></el-input>
                <!-- <el-button @click.native.capture="qx()" title="取消">检测</el-button> -->
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click.native.capture="qx()" title="取消">取消</el-button>
                <el-button type="primary" @click="saveIconMenu()" title="保存">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
.icon-box {
    &:after {
        content: '';
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        /* 蒙版颜色和透明度 */
    }

    transition: transform 0.3s;

    &:hover {
        cursor: pointer;
        transform: scale(1.05);
    }

    /* pointer-events: none; */
    .image {
        width: 100%;
        height: 60px;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        justify-content: center;

        .icon-img {
            border-radius: 10px;

        }

        /* .content {
      z-index: 1;
      color: white;
      height: 100%;
      width: 100%;
      position: sticky;
      bottom: 0;
    }*/
    }

    .title {
        font-size: 13px;
    }

    .content {
        position: relative;
        /* 确保内容在蒙版之上 */
        z-index: 1;
        color: white;
        /* 蒙版上的文字颜色 */
        height: 100%;
        width: 100%;
        position: sticky;
        bottom: 0;
    }
}
</style>: any: string: (arg0: Error | undefined) => void